<template>
  <div class="news-list">
    <!-- 新闻列表 -->
    <div class="list-content" v-loading="loading">
      <div v-for="(news, index) in newsList" :key="news.id" class="news-item" :class="{ 'with-border': index !== newsList.length - 1 }">
        <div class="news-date">
          <span class="day">{{ formatDay(news.createTime) }}</span>
          <span class="month">{{ formatMonth(news.createTime) }}</span>
        </div>
        <div class="news-content">
          <router-link :to="{ name: 'NewsDetail', params: { id: news.id }}" class="news-title">
            {{ news.title }}
          </router-link>
          <p class="news-desc">{{ news.description || '暂无描述' }}</p>
          <div class="news-meta">
            <el-tag :type="getCategoryType(news.category)" size="small">
              {{ news.category }}
            </el-tag>
            <span class="views">
              <el-icon><View /></el-icon>
              {{ news.views }} 阅读
            </span>
            <span class="time">{{ formatTime(news.createTime) }}</span>
          </div>
        </div>
        <div class="news-action">
          <router-link :to="{ name: 'NewsDetail', params: { id: news.id }}" class="read-more">
            <span>阅读全文</span>
            <el-icon><ArrowRight /></el-icon>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { View, ArrowRight } from '@element-plus/icons-vue'
import { getNewsList } from '@/api/news'

// 接收props
const props = defineProps({
  searchKeyword: {
    type: String,
    default: ''
  },
  category: {
    type: String,
    default: ''
  }
})

// 数据状态
const loading = ref(false)
const newsList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取分类标签类型
const getCategoryType = (category) => {
  const types = {
    '公司新闻': 'primary',
    '行业动态': 'success',
    '技术分享': 'warning',
    '通知公告': 'info'
  }
  return types[category] || 'info'
}

// 格式化日期
const formatDay = (date) => {
  return new Date(date).getDate().toString().padStart(2, '0')
}

const formatMonth = (date) => {
  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
  return months[new Date(date).getMonth()]
}

const formatTime = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 获取新闻列表数据
const fetchNewsList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    // 只有在有搜索关键词时才添加keyword参数
    if (props.searchKeyword && props.searchKeyword.trim()) {
      params.keyword = props.searchKeyword.trim()
    }
    
    // 只有在选择了具体分类时才添加categoryId参数
    if (props.category && props.category !== '') {
      params.categoryId = Number(props.category)
    }
    
    const res = await getNewsList(params)
    newsList.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    console.error('获取新闻列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 暴露方法给父组件
defineExpose({
  fetchNewsList
})

// 监听搜索关键词和分类变化
watch(() => props.searchKeyword, () => {
  currentPage.value = 1
  fetchNewsList()
})

watch(() => props.category, () => {
  currentPage.value = 1
  fetchNewsList()
})

// 处理每页条数变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchNewsList()
}

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchNewsList()
}

// 初始化
onMounted(() => {
  fetchNewsList()
})
</script>

<style lang="scss" scoped>
.news-list {
  .list-content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .news-item {
    display: flex;
    align-items: flex-start;
    padding: 30px;
    transition: all 0.3s ease;
    
    &.with-border {
      border-bottom: 1px solid #f0f2f5;
    }
    
    &:hover {
      background: #f8f9fa;
      
      .news-title {
        color: #4CAF50;
      }
      
      .read-more {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .news-date {
      flex-shrink: 0;
      width: 80px;
      text-align: center;
      padding: 10px;
      background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
      border-radius: 10px;
      margin-right: 25px;
      
      .day {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        margin-bottom: 5px;
      }
      
      .month {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
      }
    }
    
    .news-content {
      flex-grow: 1;
      margin-right: 20px;
      
      .news-title {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        text-decoration: none;
        margin-bottom: 12px;
        transition: color 0.3s ease;
      }
      
      .news-desc {
        font-size: 15px;
        color: #606266;
        line-height: 1.6;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .news-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 14px;
        color: #909399;
        
        .views {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        
        .time {
          color: #909399;
        }
      }
    }
    
    .news-action {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      
      .read-more {
        display: inline-flex;
        align-items: center;
        color: #4CAF50;
        text-decoration: none;
        font-weight: 600;
        opacity: 0.8;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        
        span {
          margin-right: 8px;
        }
        
        .el-icon {
          transition: transform 0.3s ease;
        }
        
        &:hover {
          opacity: 1;
          
          .el-icon {
            transform: translateX(5px);
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    
    :deep(.el-pagination) {
      --el-pagination-hover-color: #4CAF50;
      --el-pagination-button-color: #606266;
      --el-pagination-button-bg-color: #fff;
      --el-pagination-button-disabled-color: #c0c4cc;
      --el-pagination-button-disabled-bg-color: #fff;
      --el-pagination-hover-bg-color: #fff;
      
      .el-pagination__total,
      .el-pagination__sizes {
        margin-right: 20px;
      }
      
      .el-pager li {
        &:not(.is-disabled) {
          &.is-active {
            background: #4CAF50;
            color: #fff;
          }
          
          &:hover {
            color: #4CAF50;
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .news-item {
      flex-direction: column;
      padding: 20px;
      
      .news-date {
        margin-right: 0;
        margin-bottom: 15px;
      }
      
      .news-content {
        margin-right: 0;
        margin-bottom: 15px;
        
        .news-title {
          font-size: 18px;
        }
        
        .news-meta {
          flex-wrap: wrap;
          gap: 10px;
        }
      }
      
      .news-action {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}
</style> 